<template>
  <div class="page-container">
    <!-- 系统信息 -->
    <el-card class="info-card">
      <template #header>
        <div class="card-header">
          <span>系统信息</span>
          <el-button type="primary" link @click="handleRefresh">
            <el-icon><Refresh /></el-icon>刷新
          </el-button>
        </div>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="系统版本">v1.0.0</el-descriptions-item>
        <el-descriptions-item label="运行时间">30天</el-descriptions-item>
        <el-descriptions-item label="服务器状态">正常</el-descriptions-item>
        <el-descriptions-item label="数据库状态">正常</el-descriptions-item>
        <el-descriptions-item label="最后更新">2024-03-20 15:30</el-descriptions-item>
        <el-descriptions-item label="系统负载">45%</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 基本设置 -->
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <span>基本设置</span>
        </div>
      </template>
      <el-form :model="basicSettings" label-width="120px">
        <el-form-item label="系统名称">
          <el-input v-model="basicSettings.systemName" />
        </el-form-item>
        <el-form-item label="数据刷新间隔">
          <el-input-number
            v-model="basicSettings.refreshInterval"
            :min="1"
            :max="60"
          />
          <span class="unit">分钟</span>
        </el-form-item>
        <el-form-item label="数据保留时间">
          <el-input-number
            v-model="basicSettings.dataRetention"
            :min="1"
            :max="365"
          />
          <span class="unit">天</span>
        </el-form-item>
        <el-form-item label="自动备份">
          <el-switch v-model="basicSettings.autoBackup" />
        </el-form-item>
        <el-form-item label="备份时间">
          <el-time-picker
            v-model="basicSettings.backupTime"
            format="HH:mm"
            placeholder="选择时间"
            :disabled="!basicSettings.autoBackup"
          />
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 通知设置 -->
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <span>通知设置</span>
        </div>
      </template>
      <el-form :model="notificationSettings" label-width="120px">
        <el-form-item label="邮件通知">
          <el-switch v-model="notificationSettings.emailEnabled" />
        </el-form-item>
        <el-form-item label="通知邮箱">
          <el-input
            v-model="notificationSettings.email"
            :disabled="!notificationSettings.emailEnabled"
          />
        </el-form-item>
        <el-form-item label="短信通知">
          <el-switch v-model="notificationSettings.smsEnabled" />
        </el-form-item>
        <el-form-item label="通知手机">
          <el-input
            v-model="notificationSettings.phone"
            :disabled="!notificationSettings.smsEnabled"
          />
        </el-form-item>
        <el-form-item label="通知类型">
          <el-checkbox-group v-model="notificationSettings.types">
            <el-checkbox label="error">系统错误</el-checkbox>
            <el-checkbox label="warning">设备预警</el-checkbox>
            <el-checkbox label="maintenance">维护提醒</el-checkbox>
            <el-checkbox label="backup">备份完成</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 安全设置 -->
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <span>安全设置</span>
        </div>
      </template>
      <el-form :model="securitySettings" label-width="120px">
        <el-form-item label="密码有效期">
          <el-input-number
            v-model="securitySettings.passwordExpiry"
            :min="30"
            :max="365"
          />
          <span class="unit">天</span>
        </el-form-item>
        <el-form-item label="登录失败锁定">
          <el-switch v-model="securitySettings.loginLock" />
        </el-form-item>
        <el-form-item label="失败次数">
          <el-input-number
            v-model="securitySettings.maxFailAttempts"
            :min="3"
            :max="10"
            :disabled="!securitySettings.loginLock"
          />
          <span class="unit">次</span>
        </el-form-item>
        <el-form-item label="锁定时间">
          <el-input-number
            v-model="securitySettings.lockDuration"
            :min="5"
            :max="60"
            :disabled="!securitySettings.loginLock"
          />
          <span class="unit">分钟</span>
        </el-form-item>
        <el-form-item label="双因素认证">
          <el-switch v-model="securitySettings.twoFactorAuth" />
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button type="primary" @click="handleSave">保存设置</el-button>
      <el-button @click="handleReset">重置</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 基本设置
const basicSettings = ref({
  systemName: '制造业智能分析系统',
  refreshInterval: 5,
  dataRetention: 90,
  autoBackup: true,
  backupTime: new Date(2024, 2, 20, 2, 0)
})

// 通知设置
const notificationSettings = ref({
  emailEnabled: true,
  email: 'admin@example.com',
  smsEnabled: false,
  phone: '',
  types: ['error', 'warning', 'maintenance']
})

// 安全设置
const securitySettings = ref({
  passwordExpiry: 90,
  loginLock: true,
  maxFailAttempts: 5,
  lockDuration: 30,
  twoFactorAuth: false
})

// 处理函数
const handleRefresh = () => {
  // 这里添加刷新系统信息的逻辑
  ElMessage.success('系统信息已更新')
}

const handleSave = () => {
  // 这里添加保存设置的逻辑
  ElMessage.success('设置已保存')
}

const handleReset = () => {
  // 这里添加重置设置的逻辑
  ElMessage.success('设置已重置')
}
</script>

<style lang="scss" scoped>
.info-card,
.settings-card {
  margin-bottom: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.unit {
  margin-left: 8px;
  color: var(--el-text-color-secondary);
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

:deep(.el-descriptions) {
  margin: 16px 0;
}

:deep(.el-form-item) {
  margin-bottom: 24px;
}
</style> 